<template>
  <div>
    <el-divider content-position="center">经销商列表</el-divider>
    <el-table
        :data="tableData"
        style="width: 100%;margin-bottom: 20px;"
        row-key="region"
        border
        :tree-props="{children: 'children', hasChildren: 'hasChildren'}">
      <el-table-column
          prop="region"
          label="地区"
          width="150">
      </el-table-column>
      <el-table-column
          prop="name"
          label="姓名"
          sortable
          width="150">
      </el-table-column>
      <el-table-column label="营业执照" width="150">
        <template slot-scope="{row}">
          <el-image
              style="width: 50px; height: 50px"
              :src="row.img"
              fit="fill"></el-image>
        </template>
      </el-table-column>
      <el-table-column
          prop="phone"
          label="手机号"
          width="280">
      </el-table-column>
      <el-table-column
          prop="status"
          label="账号状态">
        <template slot-scope="scope">
          <el-tag
              :type="scope.row.status === '待审核' ? 'warning' : (scope.row.status === '驳回' ? 'danger' : 'success')"
              disable-transitions>{{scope.row.status}}</el-tag>
        </template>
      </el-table-column>
      <el-table-column
          label="操作">
        <template slot-scope="scope">
          <el-button
              size="mini"
              @click="handleEdit(scope.$index, scope.row)">审核</el-button>
          <el-button
              size="mini"
              type="danger"
              @click="handleDelete(scope.$index, scope.row)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
    <el-drawer
        title="开始审核!"
        :before-close="handleClose"
        :visible.sync="dialog"
        direction="ltr"
        custom-class="demo-drawer"
        ref="drawer"
    >
      <div class="demo-drawer__content">
        <el-form disabled :model="form">
          <el-form-item label="营业执照" :label-width="formLabelWidth">
            <template>
              <el-image
                  style="width: 100px; height: 100px"
                  :src="form.img"
                  :preview-src-list="srcList">
              </el-image>
            </template>
          </el-form-item>
          <el-form-item disabled="true" label="姓名" :label-width="formLabelWidth">
            <el-input v-model="form.name" autocomplete="off"></el-input>
          </el-form-item>
          <el-form-item disabled="true" label="所在地区" :label-width="formLabelWidth">
            <el-input v-model="form.region" autocomplete="off"></el-input>
          </el-form-item>
          <el-form-item disabled="true" label="电话" :label-width="formLabelWidth">
            <el-input v-model="form.phone" autocomplete="off"></el-input>
          </el-form-item>
        </el-form>
        <div class="demo-drawer__footer">
          <el-button @click="cancelForm">取 消</el-button>
          <el-button type="danger" @click="overrule(2)">驳回</el-button>
          <el-button type="primary" @click="overrule(1)">确 定</el-button>
        </div>
      </div>
    </el-drawer>
  </div>
</template>

<script>
export default {
  name: "AgentList",
  data() {
    return {
      tableData: [],
      form: {
        name: '',
        region: '',
        phone: '',
        img:''
      },
      id:'',
      srcList:[],
      dialog: false,
      formLabelWidth: '80px'
    }
  },
  methods: {
    handleEdit(index, row) {
      this.dialog = true
      this.form.name = row.name
      this.form.img = row.img
      this.form.phone = row.phone
      this.form.region = row.region
      this.id = row.id
      this.srcList.push(row.img)
    },
    handleDelete(index, row) {
      this.activeIndex = this.$route.path
      let boss = JSON.parse(sessionStorage.getItem("boss"));
      this.$prompt('请输入二级密码', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消'
      }).then(({ value }) => {
        axios({
          method:'get',
          url:'http://localhost:8081/boss/deleteAgency',
          params:{
            pwd: value,
            id: row.id,
            bid: boss.bid
          }
        }).then(res => {
          console.log(res)
          if (res.data.code === 0){
            this.$notify({
              title: '成功',
              message: res.data.msg,
              type: 'success'
            });
            location.href = "/agentList"
          }else{
            this.$notify.error({
              title: '错误',
              message: res.data.msg
            });
          }
        }).catch(err => {
          console.log(err)
        })
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '取消输入'
        });
      });
    },
    cancelForm() {
      this.dialog = false;
    },
    handleClose(done) {
      if (this.loading) {
        return;
      }
      this.$confirm('确定要提交表单吗？')
          .then(_ => {
            this.dialog = false
          }).catch(_ => {});
    },
    overrule(opt){
      let _this =this
      this.$alert('确定该操作吗', '提示', {
        confirmButtonText: '确定',
        callback: action => {
            axios({
              method:'get',
              url:`http://localhost:8081/boss/updateStatus/${opt}/${_this.id}`
            }).then(res=>{
              this.dialog = false
              location.href = '/agentList'
            }).catch(err=>{
              console.log(err)
            })
          }
      });
    }
  },
  mounted() {
    axios({
      method:'get',
      url:'http://localhost:8081/boss/getManagerAgencyList'
    }).then(res=>{
      console.log(res)
      this.tableData = res.data.data
    }).catch(err=>{
      console.log(err)
    })
  }
}
</script>

<style scoped>

</style>
